<template>
  <div>
    <el-card :class="[prefixCls]" shadow="never">
      <div class="flex items-center">
        <span class="text-16px font-700">我的APi</span>
        <div class="flex pl-20px flex-grow"></div>
      </div>
      <div class="flex items-center mt-20px">
        <el-button type="primary" @click="settingVisable = true"
          >用量预警</el-button
        >
      </div>
      <wd-crud ref="crudRef" :columns="columns" :crud="crud">
        <template #quto="{ record }">
          <el-text>
            {{ record?.total_quota }}/{{ record?.used_quota }}/{{
              record?.left_quota
            }}
          </el-text>
        </template>
        <template #name="{ record }">
          <el-text>
            {{ record?.api_product?.api_name }}
          </el-text>
        </template>
        <template #status="{ record }">
          <el-tag v-if="record?.status == 20" type="success">正常</el-tag>
          <el-tag v-else-if="record?.status == 11" type="danger">禁用</el-tag>
        </template>
        <template #operation="{ record }">
          <el-button type="text" @click="checkmx(record?.last_used_at)"
            >调用明细</el-button
          >
          <el-button type="text" @click="checkmx(record?.last_used_at)"
            >接口配置</el-button
          >
        </template>
      </wd-crud>
    </el-card>
    <el-dialog title="调用明细" v-model="dialogVisable" width="600px">
      <div>
        <el-table
          border
          header-cell-class-name="head-bg"
          :data="useData"
          style="width: 100%">
          <el-table-column align="center" prop="lastuse" label="请求时间">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="接口配置" v-model="settingVisable" width="600px">
      <div>
        <el-form ref="seetingForm" :model="seetingForm">
          <el-form-item label="请求地址">
            <el-input v-model="seetingForm.api_url" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="ApiCode">
            <el-input v-model="seetingForm.api_code" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="通用地址">
            <el-input v-model="seetingForm.ApiCode" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="ApiSercet">
            <el-input v-model="seetingForm.ApiCode" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import myApi from "@/apis/myapi";
import WdCrud from "@cwd/wd-crud";
const columns = [
  {
    title: "接口名称",
    dataIndex: "name",
  },
  {
    title: "剩余用量/已使用量/总用量",
    dataIndex: "quto",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];
const crud = reactive({
  pk: "uid",
  api: myApi.getApiListApi,
  showIndex: true,
  pageLayout: "fixed",
  operationColumn: false,
  operationColumnWidth: 260,
  formOption: { viewType: "dialog", width: "60%" },
  isExpand: true,
  beforeOpenAdd: () => {
    return true;
  },
  beforeEdit: (params) => {
    delete params.children;
    return true;
  },
});
const dialogVisable = ref(false);
const useData = ref([]);
const checkmx = (time) => {
  useData.value = [
    {
      lastuse: time,
    },
  ];
  dialogVisable.value = true;
};
const settingVisable = ref(false);
const seetingForm = reactive({});
</script>

<style lang="scss" scoped></style>
